<template>
  <div class="remote-control">
    <div class="key-grid">
      <div class="row">
        <!-- 左上角功能键 -->
        <button class="function-key top-left" @click="handleKeyPress('menu')">
          键盘
        </button>

        <!-- 上方向键 -->
        <button class="arrow-key up" @click="handleKeyPress('up')"></button>

        <!-- 右上角功能键 -->
        <button
          class="function-key top-right"
          @click="handleKeyPress('function')"
        >
          功能
        </button>
      </div>
      <div class="row">
        <!-- 左方向键 -->
        <button class="arrow-key left" @click="handleKeyPress('left')"></button>

        <!-- 中间OK键 -->
        <button class="ok-key" @click="handleKeyPress('ok')">OK</button>

        <!-- 右方向键 -->
        <button
          class="arrow-key right"
          @click="handleKeyPress('right')"
        ></button>
      </div>
      <div class="row">
        <!-- 左下角功能键 -->
        <button
          class="function-key bottom-left"
          @click="handleKeyPress('cancel')"
        >
          取消
        </button>

        <!-- 下方向键 -->
        <button class="arrow-key down" @click="handleKeyPress('down')"></button>

        <!-- 右下角功能键 -->
        <button
          class="function-key bottom-right"
          @click="handleKeyPress('exit')"
        >
          Tab
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleKeyPress(key) {
      this.$emit("key-press", key);
      console.log(`Pressed: ${key}`);

      // 这里可以添加按键音效或其他交互效果
    },
  },
};
</script>

<style lang="less" scoped >
.remote-control {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1%;
  box-sizing: border-box;
  // background: #ffd6e7; /* 更柔和的粉色背景 */

  .key-grid {
    width: 100%;
    height: 100%;
    .row {
      margin: 5% 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    button {
      border: none;
      outline: none;
      //   cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s;

      &:active {
        // transform: scale(0.95);
      }
    }

    .arrow-key {
      // width: 50px;
      // height: 36px;
      width: 3vw;
      height: 3.5vh;
      background-color: #2196f3;
      color: white;
      font-size: 24px;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%); // 三角形裁剪路径
      border-radius: 10px; // 移除圆角
      display: flex;
      align-items: flex-end; // 文字位置调整
      box-sizing: border-box;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.4);

      //   &:hover {
      //     background-color: lighten(#397bc5, 10%);
      //   }

      // 特殊处理方向键文字位置
      &.up {
        transform: rotate(0deg);
      }
      &.down {
        transform: rotate(180deg);
      }
      &.left {
        transform: rotate(270deg);
      }
      &.right {
        transform: rotate(90deg);
      }
    }

    .ok-key {
      // width: 48px;
      // height: 40px;
      width: 2.5vw;
      height: 2.5vw;
      background-color: #2196f3;
      color: #222;
      font-size: 16px;
      border-radius: 5px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.4);

      //   &:hover {
      //     background-color: lighten(#2196f3, 10%);
      //   }
    }

    .function-key {
      width: 3vw;
      height: 3vh;
      background-color: #ffffff;
      color: #333333;
      font-size: 14px;
      border-radius: 5px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 8px rgba(0, 0, 0, 0.4);

      &:hover {
        // background-color: darken(#ffffff, 10%);
      }
    }
  }
}
</style>